<template>
    <div>
        <!-- 头部tab -->
        <div class="top_tab">
        <div class="left" @click="back()">
            <img slot="left" src="../assets\order_center/shangsbai.png">
        </div>
        <span>挂牌鸿包</span>
        <div class="right" @click="soi()">
            <img slot="right" src="../assets\order_center/fangdaj.png">
        </div>
        </div>
        <div class="n"></div>
        <div class="hangtabmin">
            <div v-if="xian" class="hangzhek " @click="ChangeCss(0)" :class="index == 0?'hangactive':''">按折扣</div>
            <div v-if="xian" class="hangjine" @click="ChangeCss(1)" :class="index == 1?'hangactive':''">按金额</div>
            <input v-if="!xian" class=" dwez" type="text" v-model="texts" placeholder="请输入手机号码搜索" @keyup.enter="search"> 
        </div>
        <div class="n"></div>
        <div class="hangmint" v-for="(item,index) in orderList" :key="index">
            <div class="hangimg">
                <img v-if="item.appimage" :src="item.appimage" :onerror="logo"  alt=""> 
                <img v-else src="../assets\login/defualt_user_head.png"  alt="">

            </div>
            <div class="hangright">
                <div class="hangrti">挂牌鸿包余额 ：{{item.soldprice}}</div>
                <div class="hanghongbao">每鸿包/{{(item.discount)}}元</div>
                <div class="hangbot">
                    <div class="hangbleft">{{item.name}}</div>
                   <router-link :to='"/shingle?id="+item.id+"&ye="+item.soldprice+"&meifen="+item.discount'><div class="hangbtn">立即购买</div></router-link>
                </div>
            </div>
        </div> 
          <!-- 无订单状态 --> 
    <div class="without" v-if="orderList == 'null' || orderList == null || orderList.length == 0">
      <img src="../assets/order_center/kongbai.png" alt="">
      <span>暂无数据</span> 
    </div>
    </div>
</template>
<script>
export default {
  name: "hangtag",
  data() {
    return {
      show: false,
      show1: false,
      index: 0,
      texts:'',
      xian:true,
      orderList:[],
      logo: 'this.src="' + require('../assets/order_center/kongbai.png') + '"',

    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    }, 
    soi(){
      this.xian=!this.xian;
    },
    ChangeCss: function(index) {
      this.index = index; 
      this.order()
    },
    search(){
      this.order()
    },
    //鸿包列表
    order(){
      let self = this;
      let url = "/api/sale/show"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token,type:this.index,search:this.texts,p:1,psize:999},function(res) {
				if (res.code == 200) {   
					 self.orderList = res.data;
				}else{
           self.$dialog.toast({
                mes: res.msg,
                timeout: 1000,
                icon: 'error'
            });
				} 
      })
    }
  },
  created(){
    document.title = "挂牌鸿包";  
    this.user_id = localStorage.getItem('myid');
    this.token = localStorage.getItem('mytoken'); 
    this.order()
  } 
};
</script>
<style>
.n {
  height: 1rem;
}
.disp{
  position: relative;
}
.dwez{
  width: 98%;
  background: #fff;
  height: .61rem;
  margin-left: 1%;
  border-radius: 5px;
  border: 1px solid #dddddd;
  padding-left: .2rem;
}
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 9999999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
}
.top_tab img {
  width: 0.5rem;
}
.hangtabmin {
  width: 100%;
  padding: 2.5% 5%;
  height: 1rem;
  background: #e63f3f;
  position: fixed;
  display: flex;
}
.hangtabmin > div {
  width: 50%;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.3rem;
}
.hangzhek {
  border-top-left-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
}
.hangjine {
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}
.hangactive {
  color: #e63f3f !important;
  background: #fff;
}
.hangmint {
  height: 2rem;
  background: #fff;
  padding: 0 5%;
  margin-top: 0.3rem;
  display: flex;
}
.hangimg {
  width: 1.6rem;
  height: 1.6rem;
  margin: auto 0;
  overflow: hidden;
}
.hangimg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;

}
.hangright {
  width: 70%;
  height: 1.6rem;
  margin: auto 0 auto 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hangrti {
  font-size: 0.3rem;
}
.hanghongbao,
.hangbleft {
  font-size: 0.3rem;
  color: #999;
}
.hangbot {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.hangbleft {
  width: 70%;
  height: 0.6rem;
  padding-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hangbtn {
  width: 1.6rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  background: #f00;
  color: #fff;
  font-size: 0.3rem;
  border-radius: 0.1rem;
}
</style>

